<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <script>
      //常量路由：所有角色都可以访问的路由
      const constantRoute = [
        {
          path: '/',
          redirect: '/home',
          meta: {
            title: '',
            hidden: true,
          },
        },
        //首页路由
        {
          path: '/',
          component: () => import('@/layout/index.vue'),
          name: 'layout',
          redirect: '/home',
          meta: {
            title: 'layout',
            hidden: false,
            icon: 'HomeFilled',
          },
          children: [
            {
              path: '/home',
              component: () => import('@/views/home/index.vue'),
              meta: {
                title: '首页',
                hidden: false,
                icon: 'HomeFilled',
              },
            },
          ],
        },
        //登录路由
        {
          path: '/login',
          component: () => import('@/views/login/index.vue'),
          name: 'login', //命名路由
          meta: {
            title: '登录',
            hidden: true,
          },
        },
        //404路由
        {
          path: '/404',
          component: () => import('@/views/404/index.vue'),
          name: '404',
          meta: {
            title: '404',
            hidden: true,
          },
        },
        {
          path: '/screen',
          component: () => import('@/views/screen/index.vue'),
          name: 'screen',
          meta: {
            title: '数据大屏',
            hidden: false,
            icon: 'DataLine',
          },
        },
      ]

      //异步路由：根据分配的权限来展示的
      const asyncRoute = [
        {
          path: '/screen',
          component: () => import('@/views/screen/index.vue'),
          name: 'Screen',
          meta: {
            title: '数据大屏',
            hidden: false,
            icon: 'DataLine',
          },
        },
        {
          path: '/acl',
          name: 'Acl',
          component: () => import('@/layout/index.vue'),
          meta: {
            title: '权限管理',
            hidden: false,
            icon: 'Lock',
          },
          children: [
            {
              path: '/acl/user',
              component: () => import('@/views/acl/user/index.vue'),
              name: 'User',
              meta: {
                title: '用户管理',
                hidden: false,
                icon: 'User',
              },
            },
            {
              path: '/acl/role',
              component: () => import('@/views/acl/role/index.vue'),
              name: 'Role',
              meta: {
                title: '角色管理',
                hidden: false,
                icon: 'UserFilled',
              },
            },
            {
              path: '/acl/permission',
              component: () => import('@/views/acl/permission/index.vue'),
              name: 'Permission',
              meta: {
                title: '菜单管理',
                hidden: false,
                icon: 'Monitor',
              },
            },
          ],
        },
        {
          path: '/product',
          name: 'Product',
          component: () => import('@/layout/index.vue'),
          meta: {
            title: '商品管理',
            hidden: false,
            icon: 'Goods',
          },
          children: [
            {
              path: '/product/trademark',
              component: () => import('@/views/product/trademark/index.vue'),
              name: 'Trademark',
              meta: {
                title: '品牌管理',
                hidden: false,
                icon: 'ShoppingCart',
              },
            },
            {
              path: '/product/attr',
              component: () => import('@/views/product/attr/index.vue'),
              name: 'Attr',
              meta: {
                title: '属性管理',
                hidden: false,
                icon: 'ChromeFilled',
              },
            },
            {
              path: '/product/spu',
              component: () => import('@/views/product/spu/index.vue'),
              name: 'Spu',
              meta: {
                title: 'SPU管理',
                hidden: false,
                icon: 'Calendar',
              },
            },
            {
              path: '/product/sku',
              component: () => import('@/views/product/sku/index.vue'),
              name: 'Sku',
              meta: {
                title: 'SKU管理',
                hidden: false,
                icon: 'Orange',
              },
            },
          ],
        },
      ]

      //任意路由：Any
      const anyRoute = [
        {
          path: '/:pathMatch(.*)*',
          redirect: '/404',
          name: 'Any',
          hidden: true,
          meta: {
            title: '任意路由',
            hidden: true,
          },
        },
      ]

      let role1Routes = ['Product', 'Trademark', 'Sku']
      //根据用户的权限来筛选异步路由
      function filterAsyncRoute(asyncRoute, routes) {
        return asyncRoute.filter((item) => {
          if (routes.includes(item.name)) {
            if (item.children && item.children.length > 0) {
              item.children = filterAsyncRoute(item.children, routes)
            }
            return true
          }
        })
      }

      let filterRoute = filterAsyncRoute(asyncRoute, role1Routes)
      console.log('role1Routes==', filterRoute)

      console.log('asyncRoute==', asyncRoute)
      let role2Routes = ['Acl', 'User']
      let filterRoute2 = filterAsyncRoute(asyncRoute, role2Routes)
      console.log('role2Routes==', filterRoute2)
    </script>
  </body>
</html>
